import React, {useEffect, useState} from "react";
import Editor from "./Editor";

const defaultCode = `
import React from "react";
import {createRoot} from "react-dom/client";
import Hello from './App';
createRoot(document.getElementById("show")).render(<Hello />);
`;

const reCompile = code => {
    fetch("/compile", {
        method: "POST",
        headers: {
            "Content-Type": "text/plain",
        },
        body: code,
    })
        .then((response) => response.text())
        .then((compiledCode) => {
            try {
                eval(compiledCode);
            } catch (error) {
                console.error("Error evaluating compiled code:", error);
            }
        });
}


export default function () {
    const [code, setCode] = useState(defaultCode);
    useEffect(() => {
        reCompile(code);
    }, [code]);
    return (
        <div>
            <Editor code={code} onChange={c => setCode(c)}/>
        </div>
    )
}